<script lang="ts" setup>
import { renderMenuLabel, renderIcon } from '@/helper/router';
import { useAppStore } from '@/store/modules/app';
import { usePermissionStore } from '@/store/modules/permission';
import { AppRouteRecordRaw } from '@/types/router';
import { useRoute } from 'vue-router';

const appStore = useAppStore();
const permissionStore = usePermissionStore();

const route = useRoute();

const filterSiderRoutes = (routes: AppRouteRecordRaw[]) => {
  const res: AppRouteRecordRaw[] = [];
  routes.forEach((route) => {
    if(route.children?.length === 1) {
      res.push(route.children[0]);
      return;
    }
    if(route.hidden) {
      return;
    } else {
      res.push(route);
      if(route.children) {
        route.children = filterSiderRoutes(route.children);
      }
    }
    if(!route.children?.length) {
      delete route.children;
    }
    return route;
  });
  return res;
};
const options: any = filterSiderRoutes(permissionStore.authRoutes);

</script>
<template>
  <div
    class="h-full fixed top-0 left-0 transition-all duration-300 z-30 flex flex-col shadow-lg"
    :class="[appStore.collapsed ? 'w-sidebar--collapsed' : 'w-sidebar']"
  >
    <div class="h-header flex items-center justify-center font-bold text-medium text-primary whitespace-nowrap overflow-hidden">
      {{ appStore.collapsed ? '书' : '图书管理系统' }}
    </div>
    <NScrollbar class="flex-1 overflow-auto">
      <NMenu
        :value="(route.name as string)"
        :collapsed="appStore.collapsed"
        :collapsed-width="56"
        :indent="20"
        :options="options"
        key-field="name"
        :render-label="(route: any) => renderMenuLabel(route)"
        :render-icon="(route: any) => renderIcon(route)"
      />
    </NScrollbar>
  </div>
</template>
